<template>
  <el-menu
    :mode="mode"
    :router="true"
    :background-color="config.backgroundColor"
    class="leshuo-menu"
    @select="handelSelect"
    :active-text-color="config.activeTextColor">
    <template v-for="(item, index) in menuList">
      <el-menu-item v-if="item.children && item.children.length === 0" :index="item.href" :key="index">
        <span>{{item.label}}</span>
      </el-menu-item>
      <el-submenu v-else :index="item.href" :key="index"  @click.native="handleClick(item.href)">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{item.label}}</span>
        </template>
        <Menu :menuList="item.children"></Menu>
      </el-submenu>
    </template>
  </el-menu>
</template>
<script>
export default {
  name: 'Menu',
  inject: ['reload'],
  props: {
    mode: {
      type: String,
      default: 'vertical'
    },
    config: {
      type: Object,
      default() {
        return {
          activeTextColor: '#DB9D36',
          backgroundColor: ''
        };
      }
    },
    menuList: Array
  },
  data() {
    return {};
  },
  methods: {
    handleClick(href) {
      this.$router.push(href);
    },
    handelSelect(key, keyPath) {
      this.$router.push({ path: keyPath[0] });
      this.reload();
    }
  }
};
</script>
<style scoped>
  .leshuo-menu {
    background-color: #ebebeb;
    margin-top: 15px;
  }
</style>
